<template>
    <div class="Loginback">
        <div class="Loginimage">
            <img src="../assets/back.jpg" alt="" srcset="../assets/back.jpg" class="back">
            <div class="Logincon">
                <img src="../assets/logo.png" alt="" srcset="../assets/logo.png" class="logo">
                <div class="content">Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。</div>
                <div class="Readmore">了解更多</div>
                <div class="company">山西精易创诚网络科技有限公司版权所有  2020 </div>
            </div>
        </div>
        <div class="Login">
            <div class="Logintit">欢迎登录</div>
            <div style="border-bottom: 1px solid #eee;height:40px;">
                <div class="loginicon iconfont">&#xe60b;</div>
                <input type="text" placeholder="请输入账号" class="logininput" :value="account" v-on:keyup="check_count($event)" minlength="6" maxlength="10">
                <div class="notice" v-if="status1==false"><span class="el-icon-warning" style="margin-right: 5px;"></span>账号为6-10位数字+字母的组合</div>
            </div>
            
            <div style="border-bottom:1px solid #eee;height:40px">
                <div class="loginicon iconfont">&#xe66c;</div>
                <input type="password" placeholder="请输入密码" class="logininput" :value="password" v-on:keyup="check_pass($event)" minlength="6" maxlength="6">
                <div class="notice" v-if="status2==false"><span class="el-icon-warning" style="margin-right: 5px;"></span>密码为6位数字</div>

            </div>
            <div class="remember">
                <span class="iconfont" style="margin-right: 5px;cursor:pointer;" @click="forgetclick" :style="{color:(clickcolor==1?'green':'gray')}">&#xe634;</span> 
                <span>记住密码</span>
            </div>
            <div class="loginbtn" @click="loginclick">登录</div>
            <div class="forget">
                <div>没有账号？<span style="color:#3a62d7;">去注册</span></div>
                <div style="color: #3a62d7;">忘记密码？</div>
            </div> 
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            account:'',
            password:'',
            clickcolor:0,
            notice1:'',
            status1:true,
            status2:true,
            loginFrom:{
                account:'',
                password:''
            }
        }
    },
    methods:{
        forgetclick:function(){
            if(this.clickcolor==0){
                this.clickcolor=1
            }else{
                this.clickcolor=0
            }
        },
        check_count: function(event) {
            var value = event.target.value;
            if(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,10}$/.test(value)) {
                this.status1=true;
                this.account=value;
            }else{
                this.status1=false
            }
        },
        check_pass:function(event){
            var value = event.target.value;
            if(/^\d{6}$/.test(value)){
                this.status2=true;
                this.password=value;
            }else{
                this.status2=false

            }
        },
        loginclick:function(){
            if(this.account==''||this.password==''){
                this.$message.error('登陆失败')
            }else{
                this.$message.success('登录成功')
            }
            window.sessionStorage.setItem("token","aaa")
            this.$router.push("/home")
            // const result=this.$http.post("login",this.loginFrom);
            // console.log(result)
            // this.$router.push({path:'/two'})
        }
    }
}
</script>

<style>
    body{
        height: 100%;
        width:100%;
        background-color: #d6e9ff;
    }
    .Loginback{
        width: 1000px;
        height: 500px;
        z-index: 4;
        /* background-color:#d6e9ff; */
        border: none;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 10px 1px;
        border-radius: 3px;
        font-size: 14px;
        /* padding: 50px; */
        text-align: center;
        line-height: 20px;
        font-weight: normal;
        font-style: normal;
        opacity: 1;
        margin: 0 auto;
        margin-top: 100px;
        display: flex;
    }
    .Loginimage{
        width: 60%;
        height: 100%;
        background-size: 100% 100%;
        position: relative;
    }
    .Logincon{
        height: 90%;
        width: 80%;
        margin: 0 auto;
        margin-top: 5%;
        position: relative;
    }
    .logo{
        position: absolute;
        width: 50px;
        height: 50px;
        left: 0;
        top: 0;
        z-index: 999;
    }
    .back{
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        background-size: 100% 100%;
    }
    .content{
        z-index: 999;
        color: #fff;
        position: absolute;
        top: 100px;
        width: 80%;
        left: 0;
        /* text-indent: 2em; */
        text-align: left;
    }
    .Readmore{
        height: 30px;
        line-height: 30px;
        text-align: center;
        width: 100px;
        color: #1058a2;
        background-color: #fff;
        position: absolute;
        top: 50%;
        border-radius: 20px;
    }
    .company{
        position: absolute;
        text-align: left;
        width: 100%;
        left: 0px;
        bottom: 20px;
        color: #fff;
    }
    .Login{
        width: 40%;
        background: #fff;
        padding: 15% 30px;
    }
    .Logintit{
        font-family: SourceHanSansSC;
        font-weight: 700;
        font-size: 24px;
        color: rgb(16, 16, 16);
        font-style: normal;
        letter-spacing: 0px;
        line-height: 30px;
        text-decoration: none;
        border-bottom: 2px solid #446ad9;
        padding-bottom: 5px;
        width: 30%;
        margin: 0 auto;
        margin-bottom: 20px;
    }
    .loginicon{
        border-right: 1px solid #eee;
        color: #3a62d7;
        font-size: 20px;
        width: 15%;
        float: left;
        text-align: center;
        height: 30px;
        line-height: 30px;
        margin-top: 5px;
        font-weight: 700;
    }
    .logininput{
        float: left;
        border: none;
        height: 38px;
        padding-left: 20px;
        line-height: 38px;
        outline: none;
        padding:0 10px ;
        width: 30%;
    }
    .remember{
        height: 40px;
        line-height: 40px;
        font-size: 13px;
        text-align: left;
    }
    .loginbtn{
        height: 40px;
        line-height: 40px;
        background: #3a62d7;
        width: 100%;
        color: #fff;
        border-radius:5px;
        text-align: center;
        font-size: 16px;
        cursor:pointer;
    }
    .forget{
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        line-height: 40px;
        
    }
    .notice{
        color: red;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 12px;
    }
</style>
